<template>
  <a-modal v-model:open="open" title="新增患者" @ok="handleOk" :maskClosable="false" :width="800">
    <a-form ref="formRef" :model="formState">
      <a-form-item label="患者信息" name="patientInfo">
        <a-input-search
          v-model:value="formState.patientInfo"
          placeholder="请输入患者姓名或病案号"
          style="width: 250px"
          @keyup.enter="handleSearch"
          @search="handleSearch"
        />
      </a-form-item>
    </a-form>
    <div class="title-item">搜索结果</div>
    <a-table
      class="patientTable"
      rowKey="patId"
      :pagination="false"
      :columns="state.columns"
      :data-source="state.table"
      :loading="tableLoading"
      :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
      :scroll="{ y: 300 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'visitTime'">
          <span>{{ parseTime(record[column.dataIndex], '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </template>
    </a-table>
    <template #footer>
      <a-button key="back" @click="open = false">取消</a-button>
      <a-button type="primary" :loading="btnLoading" @click="handleOk">新增</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { parseTime } from '@/utils/tools'
import { getByName, addPatient } from '@/api/patientManagement/index.ts'
const open = ref(false)
const tableLoading = ref(false)
const btnLoading = ref(false)

type Key = string | number
const emit = defineEmits(['close'])

const state = reactive({
  columns: [
    {
      title: '患者姓名',
      dataIndex: 'patName',
      align: 'left',
      key: 'patName'
    },
    {
      title: '病案号',
      dataIndex: 'patId',
      align: 'left',
      key: 'patId'
    },
    {
      title: '就诊时间',
      dataIndex: 'visitTime',
      align: 'left',
      key: 'visitTime'
    },
    {
      title: '最近诊断',
      dataIndex: 'diagName',
      align: 'left',
      key: 'diagName'
    }
  ],
  table: [],
  selectedRowKeys: []
})

const formState = reactive({
  patientInfo: ''
})

const groupName = ref('')
const groupId = ref()

const init = (id, name) => {
  state.selectedRowKeys = []
  groupId.value = id
  groupName.value = name
  formState.patientInfo = ''
  state.table = []
  open.value = true
}

const handleSearch = () => {
  if (formState.patientInfo) {
    tableLoading.value = true
    getByName({ name: formState.patientInfo })
      .then((res) => {
        tableLoading.value = false
        state.table = res.data
      })
      .catch(() => {
        tableLoading.value = false
      })
  } else {
    message.warn('请输入患者姓名')
  }
}

const onSelectChange = (selectedRowKeys: Key[]) => {
  state.selectedRowKeys = selectedRowKeys
}

const handleOk = () => {
  btnLoading.value = true
  const data = state.table.filter((item) => state.selectedRowKeys.indexOf(item.patId) !== -1)

  if (data.length) {
    data.forEach((item) => {
      item.groupId = groupId.value
      item.groupName = groupName.value
    })
    addPatient(data)
      .then(() => {
        message.success('添加成功')
        btnLoading.value = false
        open.value = false
        emit('close')
      })
      .catch(() => {
        btnLoading.value = false
      })
  } else {
    btnLoading.value = false
    message.warn('请选择需要添加的患者')
  }
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.title-item {
  width: 100%;
  height: 32px;
  background: #f7f8fa;
  color: #1d2129;
  line-height: 32px;
  font-weight: 600;
  margin: 10px 0;
  padding-left: 16px;
}
</style>
